import { SketchPicker } from "react-color";
import styles from "./index.module.scss";
import { getRgb } from "@/cvcomponents/common/utils";
import useComponentVisible from "@/app/components/hooks/clickOutside";

function ColorItem({ onChange, color, style = {} }) {
  const { ref, isComponentVisible, setIsComponentVisible } =
    useComponentVisible(false);

  const handleClick = (e) => {
    setIsComponentVisible(true);
  };

  const handleChange = (color) => {
    onChange(color.rgb);
  };
  return (
    <div style={{ position: "relative", display: "inline-block" }} ref={ref}>
      <div className={styles.swatch} onClick={handleClick}>
        <div className={styles.color} style={{ background: getRgb(color) }} />
      </div>
      {isComponentVisible ? (
        <div className={styles.popover} style={style}>
          <SketchPicker color={color} onChange={handleChange} />
        </div>
      ) : null}
    </div>
  );
}
export default ColorItem;
